<template>
	<div class="uiue-card" v-if="appAccess?.length > 0" style="padding-top: 0">
		<a-tabs v-model:activeKey="currentIndex" class="tabss" @change="handleClick">
			<a-tab-pane v-for="item in tabData" :key="item.key" :tab="item.txt">
				<!-- <div class="tit" style="margin-top: 10px">配置信息</div>
				<component :ref="(el) => getRiskSpreadRef(el, index)" :is="item.comp"></component> -->
			</a-tab-pane>
		</a-tabs>
		<div class="tit" style="margin-top: 10px">配置信息</div>
		<!-- 如果是被退回到申请人的工单 -->
		<template v-if="isBack">
			<template v-if="tabData.length > 1">
				<!-- 如果是双端 -->
				<PortalForm ref="portal" v-show="currentIndex == '1'" />
				<MobileForm ref="mobile" :appAccess="appAccess" v-show="currentIndex == '2'" />
			</template>
			<template v-else>
				<!-- 如果是单端 -->
				<PortalForm ref="portal" v-if="currentIndex == '1'" />
				<MobileForm ref="mobile" :appAccess="appAccess" v-if="currentIndex == '2' || currentIndex == '6'" />
			</template>
		</template>
		<template v-if="!isBack">
			<template v-if="formType && tableName && tabData?.length == 1">
				<!-- 单端变更 -->
				<PortalForm ref="portal" v-if="currentIndex == '1'" />
				<MobileForm ref="mobile" :appAccess="appAccess" v-if="currentIndex == '2'" />
			</template>
			<template v-if="formType && tableName && tabData?.length > 1">
				<!-- 双端变更 -->
				<PortalForm ref="portal" v-show="currentIndex == '1'" />
				<MobileForm ref="mobile" :appAccess="appAccess" v-show="currentIndex == '2'" />
			</template>
			<template v-if="!formType && tableName">
				<!-- 特殊环节修改 -->
				<PortalForm ref="portal" v-if="currentIndex == '1'" />
				<MobileForm ref="mobile" :appAccess="appAccess" v-if="currentIndex == '2'" />
			</template>

			<!-- <template v-if="!tableName && isImport">
				<template v-if="tabData.length > 1">
					<PortalForm ref="portal" v-show="currentIndex == '1'" />
					<MobileForm ref="mobile" :appAccess="appAccess" v-show="currentIndex == '2'" />
				</template>
				<template v-else>
					<PortalForm ref="portal" v-if="currentIndex == '1'" />
					<MobileForm ref="mobile" :appAccess="appAccess" v-if="currentIndex == '2' || currentIndex == '6'" />
				</template>
			</template> -->
		</template>
	</div>
</template>

<script setup name="ConfigureForm">
import PortalForm from './portalForm.vue'
import MobileForm from './mobileForm.vue'
import androidForm from './androidForm.vue'
import iosForm from './iosForm.vue'
import umapForm from './umapForm.vue'
import tool from '@/utils/tool'
import { useRoute } from 'vue-router'
const route = useRoute()
const { isImport } = route.query
const mobile = ref()
const portal = ref()
const android = ref()
const ios = ref()
const umap = ref()
const emit = defineEmits(['handleClickIndex'])
// 业务部门审核环节不显示配置信息
const ishs = computed(() => {
	return currentName.value === '业务部门审核'
})
const props = defineProps({
	appAccess: Array
})
const currentIndex = ref('')
const tabData = ref('')
const isBack = computed(() => {
	return tool.session.get('stepId') === 'a001' ? true : false
})

const tableName = route.query.tableName
const formType = route.query.formType
const datas = inject('detailDate')
console.log(formType)
console.log(tableName)
console.log(props.appAccess)

const config = [
	{ txt: '门户Html', key: '1', oid: 'PC', comp: PortalForm, refStr: 'portal' },
	{ txt: '移动端Html', key: '2', oid: 'APP', comp: MobileForm, refStr: 'mobile' },
	{ txt: 'Android', key: '3', oid: 'ANDROID', comp: androidForm, refStr: 'android' },
	{ txt: 'IOS', key: '4', oid: 'IOS', comp: iosForm, refStr: 'ios' },
	{ txt: '移动端UMAP', key: '5', oid: 'UMAP', comp: umapForm, refStr: 'umap' },
	{ txt: '移动端Html', key: '6', oid: 'MOBILE', comp: MobileForm, refStr: 'mobile' },
]
// const configData = computed(() => {
// 	let arr = []

// 	if (tableName) {
// 		// 我的应用详情
// 		arr = config.filter((v) => tableName.includes(v.oid))
// 	} else {
// 		// 审批详情
// 		arr = config.filter((v) => datas.value.appAccess.includes(v.key))
// 	}
// 	return arr
// })

const setData = (appAccess) => {
	let arr = []

	if (tableName) {
		// 修改
		arr = config.filter((v) => tableName.includes(v.oid))
	} else {
		let str1 = appAccess.includes('1') ? 'PC_PROPERTIES' : ''
		let str2 = appAccess.includes('2') ? 'APP' : ''
		let zzstr = str1 + str2
		// 新增
		// config.forEach((v) => {
		// 	appAccess.forEach((s) => {
		// 		if (v.key === s) {
		// 			arr.push(v)
		// 		}
		// 	})
		// })
		arr = config.filter((v) => zzstr.includes(v.oid))
	}
	currentIndex.value = arr[0].key
	tabData.value = arr
}

watch(
	() => props.appAccess,
	(newData) => {
		if (newData.length > 0) {
			setData(newData)
		}
	},
	{ immediate: true }
)
const handleClick = (id) => {
	emit('handleClickIndex', id)
	if (id == currentIndex.value) {
		return
	}
	currentIndex.value = id

}
console.log(currentIndex.value)
const tabsText = (item) => {
	let str = ''
	switch (item) {
		case '1':
			str = '门户端'
			break
		case '2':
			str = '移动端HTML'
			break
		case '3':
			str = 'Android'
			break
		case '4':
			str = 'Ios'
			break
		case '5':
			str = 'Umap'
			break
		default:
			break
	}
	return str
}
// 调取移动端的表单验证
const mobileValidate = async () => {
	const val = await mobile.value.handleValidate()
	return val
}
// 调取pc端的表单验证
const portalValidate = async () => {
	const val = await portal.value.handleValidate()
	return val
}
// 调取安卓的表单验证
const androidValidate = async () => {
	const val = await android.value.handleValidate()
	return val
}
// 调取ios的表单验证
const iosValidate = async () => {
	const val = await ios.value.handleValidate()
	return val
}
// 调取umap的表单验证
const umapValidate = async () => {
	const val = await umap.value.handleValidate()
	return val
}
defineExpose({
	mobileValidate,
	portalValidate,
	androidValidate,
	iosValidate,
	umapValidate
})
</script>


<style lang="less" scoped></style>
